<template>
  <!--<transition name="el-fade-in-linear">-->
  <div class="main-bg">
     <div class="first">
      <el-row>
        <el-col >
            <el-button class="el-icon-plus" type="primary" @click="addClick()" size="mini">
              新增角色
            </el-button>
        </el-col>

      </el-row>
     </div>
    <div style="height:10px;">&nbsp;</div>
    <el-table
      size="small"
      :max-height="slide_h"
      :row-class-name="tableRowClassName"
      border style="width:100%"
      :empty-text="(data.data!=null&&data.data.length==0)?'空空如也':'数据初始化中...'"
      :data="data.data"
    >
      <el-table-column width="50" prop="id" label="ID" />
      <el-table-column width="220" prop="name" label="角色名称" />
      <el-table-column  prop="desc" label="角色备注" />
      <el-table-column width="80" fixed="right" label="角色菜单">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑菜单" placement="top">
            <el-button class="el-icon-edit-outline" type="primary" @click="editRoleMenus(scope.row)" size="mini">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column width="80" fixed="right" label="角色权限">
        <template slot-scope="scope">
          <!--<el-tooltip effect="dark" content="查看权限" placement="top">-->
            <!--<el-button class="el-icon-view" type="primary" @click="lookRolePerm(scope.row)" size="mini">-->
            <!--</el-button>-->
          <!--</el-tooltip>-->
          <el-tooltip effect="dark" content="编辑权限" placement="top">
            <el-button class="el-icon-edit-outline" type="primary" @click="editRolePerm(scope.row)" size="mini">
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column width="140" fixed="right" label="角色操作">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="修改角色" placement="top">
            <el-button class="el-icon-edit" type="primary" @click="handleClick(scope.row)" size="mini">
            </el-button>
          </el-tooltip>
          <el-tooltip effect="dark" content="删除角色" placement="top">
          <el-button class="el-icon-delete" type="danger" @click="delClick(scope.row)" size="mini">
          </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
     <v-page class="first" v-if="pageinfo.pages!=null" :pageinfo='pageinfo' @changepageinfo="changepaginfo"></v-page>
     <v-dialog v-if="dialogshow == 1" :isadd="isadd"  :dialogshow="dialogshow == 1" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog>
     <v-dialog2 v-if="dialogshow == 2" :dialogshow="dialogshow == 2" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog2>
     <v-dialog3 v-if="dialogshow == 3" :dialogshow="dialogshow == 3" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog3>
     <v-dialog4 v-if="dialogshow == 4" :dialogshow="dialogshow == 4" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog4>
  </div>
  <!--</transition>-->
</template>
<script>
  const pagination = () =>
    import ("@/components/pagination/pagetemplate")
  const dialog = () =>
    import ("@/components/modules/sysManagement/role/view_dialog_role")
  const dialog2 = () =>
    import ("@/components/modules/sysManagement/role/view_dialog_editRolePerms")
  const dialog3 = () =>
    import ("@/components/modules/sysManagement/role/view_dialog_showRolePerms")
  const dialog4 = () =>
    import ("@/components/modules/sysManagement/role/view_dialog_editRoleMenus")
  export default {
    inject:["reload"],
    components: {
      "v-page": pagination,
      "v-dialog": dialog,
      "v-dialog2": dialog2,
      "v-dialog3": dialog3,
      "v-dialog4": dialog4
    },
    data() {
      return {
        isadd:false,
        dialoginfo: {},
        dialogshow: 0,
        isajax: false,
        data: "",
        slide_h:"300",
        pageinfo:this.$store.getters.getPageInfo(this.$route.path),
      }
    },
    methods: {
      calcHeight(){
        // // console.log("------------计算当前组件的高度。并设定工作区域--------------")
        var h = 0;
        var target = document.getElementsByClassName("first");
        // console.log(target.length);
        for(var i =0;i<target.length;i++){
          h += target[i].offsetHeight;
        };
        this.slide_h = document.getElementById("pagemain").offsetHeight - (h+20);
      },
      initInfo(pageinfo){
        this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.findAllRoles,lock:1});
        this.proAPI.getJson(this.proAPI.URLS.findAllRoles,this.pageinfo).then((res) => {
          // console.log(res);
          this.calcHeight();
            this.data = res;
            this.pageinfo.pages = res.pages;
            this.pageinfo.total = res.total;
            // console.log(this.pageinfo);
        })
      },
      handleClick(row) {
        // console.log(row);
        this.dialoginfo = {"id":row.id,"name":row.name,"desc":row.desc};
        this.isadd = false;
        this.dialogshow = 1;
      },
      delClick(row){
        this.$confirm('你确定删除【'+row.name+'】角色吗?', '温馨提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          callback: action => {
            // console.log(action);
            if(action=="confirm"){
              this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.delRole,lock:1,text:this.loadingTxt});
              this.proAPI.postJson(this.proAPI.URLS.delRole,{"roleId":row.id}).then((res)=>{
                  this.$message.success({
                    "message":res.message
                  })
                  this.reload();
              })
            }
          }
        });
      },
      editRolePerm(row) {
        // console.log(row);
        this.dialogshow = 2;
        this.dialoginfo = {"id":row.id,"name":row.name,"desc":row.desc};
      },
      lookRolePerm(row){
        // console.log(row);
        this.dialogshow = 3;
        this.dialoginfo = {"id":row.id,"name":row.name,"desc":row.desc};
      },
      editRoleMenus(row){
        // console.log(row);
        this.dialogshow = 4;
        this.dialoginfo = {"id":row.id,"name":row.name,"desc":row.desc};
      },
      addClick(){
        this.isadd = true;
        this.dialoginfo = {"name":"","desc":""};
        this.dialogshow = 1;
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(this.multipleSelection);
      },
      changepaginfo(val) {
        // console.log(this.pageinfo);
        this.init({page:this.pageinfo.page,rows:this.pageinfo.rows});
        this.$store.commit("savePageInfo",{"url":this.$route.path,"pageinfo":this.pageinfo});
      },
      changedialogshow() {
        this.dialogshow = 0;
        // console.log(this.dialogshow);
      },
      tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
          return 'success-row';
        }
        return '';
      }
    },
    mounted() {
      this.initInfo({page:this.pageinfo.page,rows:this.pageinfo.rows});
    },
    updated() {
      // console.log(333);
    }
  }
</script>
<style media="scoped">
  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
